<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <input class="inp" type="text" placeholder="请输入用户名">
  <script>
    const inp = document.querySelector('.inp');
    inp.addEventListener('focus', function () {
      inp.style.width = '300px'
      inp.style.height = '100px'
      inp.style.backgroundColor = 'red'
    })

    inp.addEventListener('blur', function () {
      inp.style.width = '150px'
      inp.style.height = '40px'
      inp.style.backgroundColor = 'transparent'
    })

    inp.addEventListener('keydown', function () {
      // console.log('按下了键盘')
    })

    // DOM对象绑定事件后, 都有一个事件对象 event
    inp.addEventListener('keyup', function (event) {
      // console.log('抬起了键盘', event)
      if (event.keyCode === 13) {
        console.log('按下了回车')
      }
    })

    inp.addEventListener('input', function (event) {
      // 获取输入框的值
      // console.log(this.value)
      console.log(event.target.value)
    })
  </script>
</body>

</html>